<%- include('./public/header.ejs') %>
<style>
  .users {
    height: calc(100vh - 60px);
    background-color: #f1f1f1;
    box-sizing: border-box;
    padding: 60px;
  }

  .users .users-header {
    width: 1250px;
    height: 60px;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .users .users-header a {
    position: absolute;
    box-sizing: border-box;
    padding-left: 20px;
    text-decoration: none;
  }

  .users .users-header a:first-of-type {
    left: 0;
    padding-left: 20px;
    color: #888888;
  }

  .users .users-header a:last-of-type {
    right: 0;
    padding-right: 20px;
    color: #409eff;
  }

  .users .users-container {
    width: 1250px;
    padding: 20px;
    margin: 0 auto;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .users table {
    width: 100%;
    box-sizing: border-box;
    border: none;
  }

  table tr th {
    height: 40px;
    font-size: 13px;
    font-weight: normal;
    background-color: #cccccc;
  }

  table tr td {
    height: 40px;
    font-size: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
  }

  table tr td a {
    text-decoration: none;
    color: #409eff;
    margin-left: 8px;
  }
</style>
<section class="users">
    <div class="users-header">
        <a href="/admin/dashboard">
            <i class="ri-arrow-left-line" style="color: #888888"></i>
            返回
        </a>
        <span>用户管理</span>
        <a href="/admin/users/userinfo">
            <i class="ri-add-line" style="color:#409eff;"></i>
            新增用户
        </a>
    </div>
    <div class="users-container">
        <table border="0">
            <tr>
                <th>用户名</th>
                <th>昵称</th>
                <th>邮箱</th>
                <th>状态</th>
                <th>角色</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            <% list.forEach(item=>{ %>
                <tr>
                    <td><%= item.username %></td>
                    <td><%= item.nickname %></td>
                    <td><%= item.email %></td>
                    <td><%= item.status %></td>
                    <td><%= item.role_id %></td>
                    <td><%= helper.formatDate(item.create_time, 'YYYY-MM-DD HH:mm:ss') %></td>
                    <td>
                        <a href="/admin/users/userinfo?id=<%= item.id %>">编辑</a>
                        <% if(userinfo.username !== item.username) { %>
                            <a id="delete" data-username="<%= item.username %>"
                               href="/admin/users/delete?id=<%= item.id %>" style="color: #f56c6c">删除</a>
                        <% } %>
                    </td>
                </tr>
            <% }) %>
        </table>
    </div>
</section>

<script>
  window.onload = () => {
    const deleteTag = document.querySelector('#delete');
    if (deleteTag) {
      deleteTag.onclick = () => {
        const username = deleteTag.attributes['data-username'].value;
        return confirm(`您确定要删除用户“${username}”吗?`);
      }
    }
  }
</script>
</body>
</html>
